<script setup>
import { ref, onMounted } from 'vue'

// 皮影种类数据
const shadowplayTypes = [
  {
    id: 1,
    name: '陕西皮影',
    region: '陕西省',
    description: '陕西皮影是中国皮影戏的重要流派之一，以西安和华县为中心。陕西皮影造型粗犷，色彩鲜明，线条流畅有力。影人头部较大，身体比例夸张，具有强烈的装饰性。',
    characteristics: [
      '造型粗犷有力',
      '色彩对比强烈',
      '演出风格豪迈',
      '音乐伴奏以碗碗腔为主'
    ],
    image: 'https://picsum.photos/id/210/600/400'
  },
  {
    id: 2,
    name: '唐山皮影',
    region: '河北省唐山市',
    description: '唐山皮影又称滦州皮影，是中国北方皮影的代表。唐山皮影的影人造型优美，线条细腻，以白色为底，色彩鲜艳。影人面部表情生动，动作灵活。',
    characteristics: [
      '造型优美细腻',
      '雕刻工艺精湛',
      '表演细腻生动',
      '音乐以四弦为主伴奏'
    ],
    image: 'https://picsum.photos/id/211/600/400'
  },
  {
    id: 3,
    name: '潮州皮影',
    region: '广东省潮州市',
    description: '潮州皮影是中国南方皮影的代表，历史悠久。潮州皮影的影人造型小巧精致，色彩淡雅，以蓝色、绿色为主色调。影人关节灵活，表演细腻。',
    characteristics: [
      '造型小巧精致',
      '色彩清新淡雅',
      '注重细节表现',
      '音乐伴奏以潮州音乐为主'
    ],
    image: 'https://picsum.photos/id/212/600/400'
  },
  {
    id: 4,
    name: '四川皮影',
    region: '四川省',
    description: '四川皮影又称川北皮影，以阆中为中心。四川皮影的影人造型独特，面部表情夸张，动作灵活多变。表演风格幽默风趣，富有生活气息。',
    characteristics: [
      '造型夸张幽默',
      '表演生动活泼',
      '音乐伴奏丰富多样',
      '擅长表现民间故事'
    ],
    image: 'https://picsum.photos/id/213/600/400'
  },
  {
    id: 5,
    name: '北京皮影',
    region: '北京市',
    description: '北京皮影又称驴皮影，是中国北方皮影的重要流派。北京皮影的影人造型讲究对称，色彩鲜明，线条流畅。表演风格庄重典雅，注重故事情节的表现。',
    characteristics: [
      '造型庄重典雅',
      '色彩明快鲜艳',
      '表演注重情节',
      '音乐伴奏以京胡为主'
    ],
    image: 'https://picsum.photos/id/214/600/400'
  },
  {
    id: 6,
    name: '湖北皮影',
    region: '湖北省',
    description: '湖北皮影以云梦皮影为代表，历史悠久。湖北皮影的影人造型独特，面部表情生动，动作灵活。表演风格细腻，音乐伴奏丰富多彩。',
    characteristics: [
      '造型独特多样',
      '表演细腻生动',
      '音乐伴奏丰富',
      '擅长表现历史故事'
    ],
    image: 'https://picsum.photos/id/215/600/400'
  }
]

// 当前选中的皮影种类
const selectedType = ref(null)

// 打开详情模态框
const openDetailModal = (type) => {
  selectedType.value = type
}

// 关闭详情模态框
const closeDetailModal = () => {
  selectedType.value = null
}
</script>

<template>
  <div class="types-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">地域流派</h1>
      <p class="page-subtitle">中国各地皮影艺术的独特魅力</p>
    </div>

    <!-- 引言部分 -->
    <section class="intro-section container">
      <p class="intro-text">
        中国地域辽阔，各地的皮影戏因地理环境、文化传统、审美观念的不同，形成了各具特色的艺术风格。从北到南，从东到西，不同地区的皮影戏在造型、唱腔、表演等方面都有着鲜明的地域特色。
      </p>
      <p class="intro-text">
        以下是中国主要的皮影戏流派，每一种都代表着当地独特的文化传统和艺术追求。
      </p>
    </section>

    <!-- 皮影种类展示 -->
    <section class="types-section container">
      <div class="types-grid">
        <div v-for="type in shadowplayTypes" :key="type.id" class="type-card" @click="openDetailModal(type)">
          <div class="type-image">
            <img :src="type.image" :alt="type.name" class="card-image" />
            <div class="type-overlay">
              <span class="view-detail">查看详情</span>
            </div>
          </div>
          <div class="type-info">
            <h3 class="type-name">{{ type.name }}</h3>
            <p class="type-region">{{ type.region }}</p>
            <p class="type-preview">{{ type.description.substring(0, 80) }}...</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色对比 -->
    <section class="comparison-section">
      <div class="container">
        <h2 class="section-title">南北皮影对比</h2>
        <div class="comparison-content">
          <div class="comparison-column">
            <h3 class="comparison-title">北方皮影</h3>
            <ul class="comparison-list">
              <li class="comparison-item">造型粗犷有力，线条简洁</li>
              <li class="comparison-item">色彩鲜明对比强烈</li>
              <li class="comparison-item">影人较大，多以牛皮制作</li>
              <li class="comparison-item">音乐风格豪放激昂</li>
              <li class="comparison-item">表演风格大气磅礴</li>
            </ul>
          </div>
          <div class="comparison-column">
            <h3 class="comparison-title">南方皮影</h3>
            <ul class="comparison-list">
              <li class="comparison-item">造型精致细腻，线条流畅</li>
              <li class="comparison-item">色彩淡雅清新</li>
              <li class="comparison-item">影人较小，多以羊皮制作</li>
              <li class="comparison-item">音乐风格委婉细腻</li>
              <li class="comparison-item">表演风格细腻含蓄</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 文化保护 -->
    <section class="protection-section container">
      <h2 class="section-title">皮影戏的保护与传承</h2>
      <div class="protection-content">
        <div class="protection-text">
          <p>
            随着时代的发展，传统皮影戏面临着传承和发展的挑战。为了保护这一珍贵的非物质文化遗产，各地政府和文化机构采取了一系列措施：
          </p>
          <ul class="protection-list">
            <li class="protection-item">建立皮影戏传承基地，培养年轻传承人</li>
            <li class="protection-item">将皮影戏纳入学校艺术教育课程</li>
            <li class="protection-item">举办皮影戏艺术节和展演活动</li>
            <li class="protection-item">利用现代科技手段记录和传播皮影艺术</li>
            <li class="protection-item">开发皮影文化创意产品，扩大影响力</li>
          </ul>
        </div>
        <div class="protection-image">
          <img src="https://picsum.photos/id/216/600/400" alt="皮影戏传承" class="featured-image" />
        </div>
      </div>
    </section>

    <!-- 详情模态框 -->
    <div v-if="selectedType" class="modal-overlay" @click.self="closeDetailModal">
      <div class="modal-content">
        <button class="close-button" @click="closeDetailModal">×</button>
        <div class="modal-header">
          <h2 class="modal-title">{{ selectedType.name }}</h2>
          <p class="modal-region">{{ selectedType.region }}</p>
        </div>
        <div class="modal-body">
          <div class="modal-image">
            <img :src="selectedType.image" :alt="selectedType.name" class="detail-image" />
          </div>
          <div class="modal-description">
            <p class="full-description">{{ selectedType.description }}</p>
            <h3 class="characteristics-title">艺术特点</h3>
            <ul class="characteristics-list">
              <li v-for="(char, index) in selectedType.characteristics" :key="index" class="characteristic-item">
                {{ char }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 页面头部 */
.page-header {
  background-color: var(--color-secondary);
  color: white;
  text-align: center;
  padding: 3rem 2rem;
}

.page-title {
  font-size: 3rem;
  margin: 0 0 1rem 0;
  color: var(--color-accent);
  font-family: 'STZhongsong', serif;
}

.page-subtitle {
  font-size: 1.5rem;
  margin: 0;
  opacity: 0.9;
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-heading);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--color-primary);
}

/* 引言部分 */
.intro-text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--color-text-light);
}

/* 皮影种类展示 */
.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2.5rem;
}

.type-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.type-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.type-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.type-card:hover .card-image {
  transform: scale(1.05);
}

.type-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.type-card:hover .type-overlay {
  opacity: 1;
}

.view-detail {
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: var(--color-primary);
  padding: 0.8rem 2rem;
  border-radius: 25px;
  transition: background-color 0.3s ease;
}

.view-detail:hover {
  background-color: var(--color-secondary);
}

.type-info {
  padding: 1.5rem;
}

.type-name {
  font-size: 1.6rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem 0;
}

.type-region {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.type-preview {
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* 南北对比 */
.comparison-section {
  background-color: var(--color-background-soft);
}

.comparison-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.comparison-title {
  font-size: 1.8rem;
  color: var(--color-primary);
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-item {
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  margin-bottom: 0.8rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.2s ease;
}

.comparison-item:hover {
  transform: translateX(5px);
}

.comparison-item::before {
  content: '•';
  position: absolute;
  left: 1rem;
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

/* 文化保护 */
.protection-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.protection-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.protection-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
}

.protection-item {
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  margin-bottom: 0.8rem;
  background-color: var(--color-background-soft);
  border-radius: 8px;
  position: relative;
  transition: background-color 0.2s ease;
}

.protection-item:hover {
  background-color: var(--color-secondary-light);
}

.protection-item::before {
  content: '✓';
  position: absolute;
  left: 1rem;
  color: var(--color-primary);
  font-weight: bold;
  top: 50%;
  transform: translateY(-50%);
}

.featured-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  font-size: 2rem;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.close-button:hover {
  background-color: var(--color-background-soft);
}

.modal-header {
  text-align: center;
  padding: 2rem 2rem 0;
}

.modal-title {
  font-size: 2.2rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem 0;
}

.modal-region {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin: 0;
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.detail-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.full-description {
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0 0 1.5rem 0;
}

.characteristics-title {
  font-size: 1.4rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
}

.characteristics-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.characteristic-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.characteristic-item:last-child {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem;
  }
  
  .page-subtitle {
    font-size: 1.2rem;
  }
  
  .types-grid {
    grid-template-columns: 1fr;
  }
  
  .comparison-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .protection-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .modal-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .modal-header {
    padding: 1.5rem 1.5rem 0;
  }
  
  .modal-title {
    font-size: 1.8rem;
  }
}
</style>